<script setup lang="ts">
import { useWebxRouteTabs, useWebxTable } from "@webxue/vue3-antdv-ui";
import { BarsOutlined } from "@ant-design/icons-vue";
import { BaseApi } from "@/apis/base.api";
import { message } from "ant-design-vue";
import useCusRouter from "@/hooks/useCusRouter";

const { router, routeQuery } = useCusRouter({
  queryKeys:[
    // 字典类型
    "dictType",
    // 字典名称
    "dictName"
  ]
});
const { addTab } = useWebxRouteTabs({ router });
const { searchForm, dataSource, columns, pagination, doRefresh, doSearch, doReset, doCreate, doUpdate, doDelete } = useWebxTable({
  searchForm:{
    name:""
  },
  tableColumns:[
    { title: "字典值Label", dataIndex: "dictLabel", width: 200 },
    { title: "字典值Value", dataIndex: "dictValue", width: 100 },
    { title: "状态", dataIndex: "status", width: 80 },
    { title: "更新时间", dataIndex: "updateDate", width: 130 },
    { title: "备注", dataIndex: "remark" },
    { title: "操作", dataIndex: "operate", width: 120 }
  ],
  async api(){
    const response = await BaseApi.dictData.tree({
      dictType: routeQuery.value.dictType,
      // keyword: searchForm.value.name
    });
    return Promise.resolve(response.data);
  },
  // 新增
  async onCreate() {
    addTab({
      title:"新增字典数据-" + routeQuery.value.dictName,
      href:`/dict/dictDataForm?dictType=${routeQuery.value.dictType}`,
      key:"create-dictData-" + routeQuery.value.dictType
    })
  },
  // 编辑
  async onUpdate(record) {
    addTab({
      title:"编辑字典数据-" + record.dictLabel,
      href:`/dict/dictDataForm?dictType=${routeQuery.value.dictType}&dictDataId=` + record.id,
      key:"edit-dictData-" + record.id
    })
  },
  // 删除
  async onDelete(record) {
    const response = await BaseApi.dictData.delete({ ids: record.id });
    if(response.success) {
      message.success("字典值删除成功");
      await doSearch();
    }
  }
});
</script>

<template>
  <div class="person-index flex flex-col gap-2">
    <!-- 查询条件 -->
    <WebxSearch
        :model="searchForm"
        @submit="doSearch"
        @reset="doReset"
    >
      <AFormItem label="关键词">
        <AInput v-model:value="searchForm.name" placeholder="请输入关键词" />
      </AFormItem>
    </WebxSearch>
    <!-- 表格 -->
    <WebxTable
        :dataSource="dataSource"
        :columns="columns"
        :pagination="pagination"
        rowKey="id"
        expandRowByClick
        @refresh="doRefresh"
        @create="doCreate"
    >
      <template #headLeft>
        <div class="flex gap-2 text-blue-500 text-base">
          <BarsOutlined />
          {{ routeQuery.dictName }}
        </div>
      </template>
      <template #bodyCell="{ column, record, index }">
        <template v-if="column.dataIndex === 'status'">
          <ATag color="green" v-if="record.status === 1">启用</ATag>
          <ATag color="pink" v-else-if="record.status === 2">停用</ATag>
          <ATag color="red" v-else-if="record.status === 3">删除</ATag>
        </template>
        <template v-if="column.dataIndex === 'operate'">
          <div class="flex gap-2">
            <WebxBtn operate="edit" @click="doUpdate(record)" />
            <WebxBtn operate="del" :modalContant="`确定要删除字典值 ${record.dictLabel} 吗？`"
                     @delete="() => doDelete(record)" />
          </div>
        </template>
      </template>
    </WebxTable>
  </div>
</template>

<style scoped lang="less"></style>
